<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" placeholder="名字"><!--placeholder占位符-->
<input type="text" placeholder="工资"><!--placeholder占位符-->
<input type="text" placeholder="工作"><!--placeholder占位符-->
<input type="button" value="添加">
<table border="1">
<caption></caption>
<!--caption标题-->
<tr>
    <th>名字</th><!--th表头-->

    <th>工资</th><!--th表头-->

    <th>工作</th><!--th表头-->

    <th>操作</th><!--th表头-->

</tr>
</table>
<!--引入jQuery框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("input[value]").click(function () {
        //在事件中创建1个tr    和 3个td
        let tr = $("<tr></tr>");
        let nameTd = $("<td></td>");
        let salaryTd = $("<td></td>");
        let jobTd = $("<td></td>");
        let delTd = $("<td><input type='button' value='删除'></td>")
        //给td里面的删除按钮添加点击事件
        delTd.children().click(function () {
            //删除该行
            tr.remove();
        })
        //把文本框的内容取出来 赋值给td.text();
        nameTd.text($("input:eq(0)").val());
        salaryTd.text($("input:eq(1)").val());
        jobTd.text($("input:eq(2)").val());
        //把td装进tr
        tr.append(nameTd);
        tr.append(salaryTd);
        tr.append(jobTd);
        tr.append(delTd);
        //把tr装进table
        $("table").append(tr);
    })
</script>
</body>
</html>